<template>
  <div class="box">
    <p>过滤器使用子组件演示</p>

    <!-- 1. 过滤器在插值表达式中使用, 前面必须得有管道修饰符 | -->
    <!-- <div>金额： {{ money | haha }}</div> -->
    <!-- <div>金额： {{ money | haha('€') }}</div> -->
    <div>金额： {{ money | haha('€') | sliceStr }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 27318
    }
  },
  // 过滤器的意思，就是对data或者其他的数据进行装饰，而不改变源数据
  // vue3 都已经放弃了，最初表现灵感来自于 AngularJS
  filters: {
    // 参数代表的是管道修饰符之前的数据
    // haha(val) {
    //   const num = val / 1000 + ''
    //   const strArr = num.split('')
    //   strArr[2] = ','
    //   return '$' + strArr.join('')
    // },
    haha(val, x) {
      const num = val / 1000 + ''
      const strArr = num.split('')
      strArr[2] = ','
      return x + strArr.join('')
    },
    sliceStr(val) {
      return val + '.00'
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 300px;
  height: 300px;
  padding: 20px;
  margin: 10px;
  background-color: #eee;
}
</style>
